<template>
	<view class="container">
		<view class="u-abso u-abso-t-0 u-abso-b-0 u-abso-l-0 u-abso-r-0">
			<image style="width: 100%;height: 100%;" src="/static/loginBanner.png"></image>
		</view>
		<u-navbar title="登录" :background="{backgroundColor: 'inherit'}" :border-bottom="false" title-size="28" title-color="#000000" back-icon-color="#666666" back-icon-size="28"></u-navbar>
		<view class="u-rela box u-zindex-9">
			<view class="u-flex u-row-center u-col-center u-m-b-30">
				<u-image width="328" height="328" :src="setting.app_logo"></u-image>
			</view>
			
			<view class="uInput">
				<u-image src="/static/account.png" width="26" height="28"></u-image>
				<u-input v-model="username" type="text" class="u-m-l-30 u-flex-1"  placeholder="请输入姓名"></u-input>
			</view>
			<view class="uInput">
				<u-image src="/static/mobile.png" width="29" height="26"></u-image>
				<u-input v-model="id_card" type="idcard" class="u-m-l-30 u-flex-1" placeholder="请输入身份证"></u-input>
			</view>
			<view class="u-font-24 black"><text class="u-type-error u-m-r-10">*</text>请填写您在莲花街道登记的真实身份证后6位</view>
			<view class="u-m-tb-30">
				<u-button type="success" :custom-style="{background: 'linear-gradient(177deg, #11CCA8 1%, #009175 100%)'}" hover-class="none" shape="circle" @click="login"> 登录</u-button>
			</view>
			<view class="u-m-b-15">
				<u-checkbox-group shape="circle" active-color="#009175" size="26" >
					<u-checkbox v-model="check" :label-disabled="true">
						<view class="u-font-22" @click.stop="clickAgreement">阅读并同意<text style="color: #009175;" @click.stop="$u.route('/pages/public/agreement?id=1')">《用户隐私协议》</text></view>
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="u-font-22  u-content-color u-m-t-80">
				<view class="u-text-center">
				本次活动收集数据仅限于此次活动使用，不会涉及任何其他不 相关业务，详情请查看本次活动的<text style="color: #009175;" @click="$u.route('/pages/public/agreement?id=1')">《用户隐私协议》</text>
			</view>
			<view  class="u-text-center u-m-t-30">
				如有任何疑问联系我们工作人员：<text style="color: #009175;">83079112</text>
			</view></view>
		</view>
		
		
		
	</view>
</template>
<script>
	export default {
		data(){
			return{
				check: false,
				popupShow: false ,// 活动结束
				username: '',
				id_card: ''
			}
		},
		methods: {
			login(){
				if(!this.username) return this.$u.toast('请输入姓名')
				if(!this.id_card || this.id_card.length != 6) return this.$u.toast('请填写您在莲花街道登记的真实身份证后6位')
				if(!this.check) return this.$u.toast('请阅读并同意用户隐私协议')
				this.$u.api.userLogin({username: this.username,id_card: this.id_card}).then(res => {
					this.$u.toast(res.msg)
					this.$u.vuex('userInfo',res.data)
					this.$u.vuex('isLogin',true)
					setTimeout(() => {
						this.$u.route({url: '/pages/index/index',type: 'switchTab'})
					},1500)
				}).catch(err => this.$u.toast(err.msg))
			},
			clickAgreement(){
				this.check = !this.check
			}
		}
	}
</script>
<style scoped lang="scss">
	.container{
		height: 100vh;
		overflow: hidden;
	}
	
	

	.box{
		padding-top: 125rpx;
		padding-left: 60rpx;
		padding-right: 60rpx;
		
		.uInput{
			display: flex;
			align-items: center;
			padding: 10rpx 30rpx;
			background: #F8F8F8;
			border-radius: 50rpx;
			margin-bottom: 50rpx;
		}
	}
</style>